1. flex-direction: dapat mengontrol arah penempatan elemen

• flex-direction: row; elemen ditempatkan secara horizontal, dari kiri ke kanan (nilai default)
• flex-direction: row-reverse; elemen ditempatkan secara horizontal, dari kanan ke kiri
• flex-direction: column; elemen ditempatkan secara vertikal dari atas ke bawah
• flex-direction: column-reverse; elemen ditempatkan secara vertikal dari bawah ke atas

2. justify-content: mengatur penempatan elemen dalam container secara horizontal (kiri ke kanan)

• justify-content: flex-start; elemen ditempatkan di awal/kiri container (nilai default pada sumbu utama)
• justify-content: flex-end; elemen ditempatkan di akhir/kanan container pada sumbu utama
• justify-content: center; elemen ditempatkan ditengah container secara horizontal
• justify-content: space-between; elemen-elemen ditempatkan dengan jarak yang merata di antara mereka pada sumbu utama
• justify-content: space-around; elemen-elemen ditempatkan dengan jarak yang merata di sekitar mereka pada sumbu utama

3. align-items: mengatur penempatan elemen dalam container secara vertikal (atas ke bawah)

• align-items: flex-start; elemen ditempatkan di atas container (nilai default)
• align-items: flex-end; elemen ditempatkan di bagian bawah container
• align-items: center; elemen ditempatkan di tengah container secara vertikal
• align-items: baseline; elemen-elemen ditempatkan pada garis dasar yang sama/merata
• align-items: stretch; elemen-elemen diperluas agar mencakup tinggi container

4. flex-wrap: mengatur apakah elemen dalam kontainer flex akan melingkari (wrap) ke baris baru jika tidak cukup ruang

• flex-wrap: nowrap; elemen-elemen tetap dalam satu baris (nilai default)
• flex-wrap: wrap; elemen-elemen melingkari (wrap) ke baris baru jika tidak cukup ruang

5. align-content: memiliki efek ketika elemen dalam container flex melingkari ke baris baru

• align-content: flex-start; jika elemen dalam container melingkari garis baru maka elemen akan di peratakan di awal baris pertama
• align-content: flex-end;
• align-content: center;
• align-content: space-between;
• align-content: space-around;

tata letak dalam bentuk grid atau kisi kisi

1. grid-template: menentukan kolom pada grid

• grid-template-columns: 20px 100px 20px; mengatur lebar kolam pada grid
• grid-template-rows: 50px 200px 10px; mengatur tinggi baris dalam grid
• grid-template-areas:

                              body {
                                  grid-template-areas:  
                                      "header header header"
                                      "sidebar main main"
                                      "footer footer footer";
                              }
   
                              .header {
                                  grid-area: header; elemen akan mengisi dengan nama header
                              }
                              .main {
                                  grid-area: main; elemen akan mengrisi dengan nama main
                              }
                          

  mengatur susunan area dalam grid dengan menyediakan nama-nama area

2. grid-gap: menentukan jarak dan baris dalam grid

• grid-gap: 10px; menentukan jarak antara kolam dan baris dalam grid (mirip margin)
• gap: 10px; menentukan jarak antara kolam dan baris dalam grid (mirip margin)

3. grid-starf and grid-end: mengatur dimana elemen harus mulai dan berakhir dalam grid

• grid-column-start: 1; elemen dimulai pada kolam pertama
• grid-column-end: 3; elemen berakhir pada kolam ketiga
• grid-row-start: 2; elemen dimulai pada baris pertama
• grid-row-end: 3; elemen berakhir pada baris ketiga


• grid-column/row-start: 2;
• grid-column/row-end: span 3; elemen akan mencakup 3 kolam dari kolam kedua
• jadi elemen akan mencakup kolam kedua, ketiga, dan keempat

4. grid-auto: menentukan ukuran kolam dan baris pada grid untuk elemen yang secara otomatis ditambahkan

• grid-template-columns: 100px;
• grid-auto-columns: 50px; elemen baru akan memilki lebar 50px


• grid-template-rows: 100px;
• grid-auto-rows: 50px; elemen baru akan memilki tinggi baris 50px

5. items dan content: mengatur posisi

• justify-items: start; mengatur posisi konten dalam sel grid secara horizontal(justify)
• align-items: center; mengatur posisi konten dalam sel grid secara vertikal(align)


• justify-content: center; mengatur posisi grid container secara horizontal(justify) dalam grid area
• align-content: end; mengatur posisi grid secara vertikal(align) dalam grid area


• place-items: start center; menggabungkan justify-items ,dan align-items dalam satu deklarasi
• place-content: center center; menggabungkan justify-content ,dan align-content dalam satu deklarasi

6. grid-auto-flow: elemen akan ditambahkan secara otomatis

• grid-auto-flow: column; elemen akan ditambahkan secara otomatis akan di atur dalam urutan kolam (secara vertikal) dari atas ke bawah
• grid-auto-flow: row; elemen akan ditambahkan secara otomatis akan di atur dalam urutan baris (secara horizontal)